<template>
    <div class='screen_body'>
        <div class='screen_title'>数字化大屏</div>
        <div class='screen_body'>
            <div class='screen_item left'>
                <div class='screen_item_top screen_chart'>
                    <div ref='echartDom' style="width:480px;height:276px;"></div>
                    <div ref='echartDom1' style="width:480px;height:316px;"></div>
                </div>
                <div class='screen_item_bottom screen_chart'></div>
            </div>
            <div class='screen_item center'>
                <div class='sales_amount'>
                    <a-statistic title="总订单" :precision="2" :value="200" 
                    valueStyle="color:aqua;font-size:28px;line-height:36px;font-weight:bold;" />
                    <a-statistic title="销售总额(CNY)" :precision="2" :value="112893" 
                    valueStyle="color:aqua;font-size:28px;line-height:36px;font-weight:bold;" />
                </div>
                <div ref='echartDom2' style="width:480px;height:276px;background:rgba(0,0,0,.5)"></div>
                <div ref='echartDom3' style="width:480px;height:226px;background:rgba(0,0,0,.5);margin-top: 10px;"></div>
            </div>
            <div class='screen_item right'>
                <div class='screen_item_top screen_chart'>
                    <div ref='echartDom4' style="width:480px;height:276px;background:rgba(0,0,0,.5)"></div>
                </div>
                <div class='screen_item_bottom screen_chart'>
                    <div ref='echartDom5' style="width:480px;height:276px;background:rgba(0,0,0,.5)"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import './screen.css';
import {onMounted, ref} from 'vue';
import * as echarts from "echarts";
const echartDom = ref()  // 使用ref创建虚拟DOM引用，使用时用main.value
const echartDom1 = ref() 
const echartDom2 = ref() 
const echartDom3 = ref() 
const echartDom4 = ref() 
const echartDom5 = ref() 
const getEchart = () => {
    var myChart = echarts.init(echartDom.value);
    var myChart1 = echarts.init(echartDom1.value);
    var myChart2 = echarts.init(echartDom2.value);
    var myChart3 = echarts.init(echartDom3.value);
    var myChart4 = echarts.init(echartDom4.value);
    var myChart5 = echarts.init(echartDom5.value);
    var option = {
        title: {
            text: '店铺销售统计',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '6%',
            containLabel: true
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    };
    var option1 = {
        color: ['#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        title: {
            text: '店铺订单统计',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['小刘服饰', '刘生花服饰', '小刘衣帽间',]
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [15, 40, 36,]
            }
        ]
    };
    var option2 = {
        title: {
            text: '售后统计',
             textStyle: {
                color: '#fff'
            }
        },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['小刘服饰', '小刘衣帽间', '刘生花服饰']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '小刘服饰',
      type: 'line',
      stack: 'Total',
      data: [0, 3, 7, 1, 9, 8, 2]
    },
    {
      name: '小刘衣帽间',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0, 1, 0, 5]
    },
    {
      name: '刘生花服饰',
      type: 'line',
      stack: 'Total',
      data: [0,6, 0, 0, 0, 2, 0]
    },
  ]
    }
    var option3 = {
         title: {
            text: '员工销量统计',
             textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['向东', '李伟', '李薇', '小宁']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
            saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            name: '向东',
            type: 'line',
            stack: 'Total',
            data: [10, 23, 67, 10, 90, 28, 12]
            },
            {
            name: '李伟',
            type: 'line',
            stack: 'Total',
            data: [9, 10, 2, 7, 0, 23, 45]
            },
            {
            name: '李薇',
            type: 'line',
            stack: 'Total',
            data: [50,16, 40, 10, 8, 9, 30]
            },
            {
            name: '小宁',
            type: 'line',
            stack: 'Total',
            data: [30,16, 80, 10, 28, 59, 30]
            },
        ]
    }
    var option4 = {
        title: {
    text: '服饰总销量占比统计',
    // subtext: 'Fake Data',
    left: 'center',
    textStyle: {
                color: '#fff'
            }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '卫衣' },
        { value: 735, name: '连帽卫衣' },
        { value: 580, name: 'T恤衫' },
        { value: 484, name: '套装' },
        { value: 300, name: '单品' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
    }
    var option5 = {
       title: {
    text: '供应商统计',
    textStyle: {
                color: '#fff'
            }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['北京小马', '上东森', '小花螺']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['第一季度', '第二季度', '第三季度', '第四季度']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '北京小马',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134]
    },
    {
      name: '上东森',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234]
    },
    {
      name: '小花螺',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [350, 132, 610,300]
    }
  ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    myChart4.setOption(option4);
    myChart5.setOption(option5);
}
onMounted(() => {
    getEchart()
})
</script>